// import { Route, Routes } from 'react-router-dom'
// import Home from './pages/Home'
// import Login from './pages/Login'
// import User from './pages/User'
import store from './store'
// import { getNewsList } from './store/news'

import { lazy, Suspense, useState } from 'react'
// 导入路由规则数组
import routes from './router/index'
import { RouterGuard } from './router/routerGuard'

import './assets/style/login.scss'
import { HashRouter, NavLink, useRoutes } from 'react-router-dom'

import { useEffect } from 'react'

function App() {
  const { getState, dispatch, subscribe } = store
  let [newsList, setNewsList] = useState([])
  useEffect(() => {
    // 发送数据请求, 请求新闻列表数据
    // dispatch(getNewsList({ page: 1, size: 10 }))
  }, [dispatch])
  // 监视redux数据仓库变化
  // subscribe(() => {
  //   const state = getState()
  //   // 更新页面状态数据
  //   setNewsList(state.news.newsList)
  // })
  // 函数组件: 获取一个路由规则组件
  const GetRoutes = () => useRoutes(routes)
  return (
    <>
      {/* {newsList.map((item: NewsRow, index: number) => (
        <h5 key={item.id}>{++index}-{item.title}</h5>
      ))}
      <hr /> */}
      <HashRouter>


        <Suspense fallback={<h1>loading...</h1>}>
          <RouterGuard>
            <GetRoutes />
          </RouterGuard>
        </Suspense>

        {/* <Suspense fallback={<h1>loading...</h1>}>
          <Routes>
            <Route path='/' Component={lazy(() => import('./pages/Home'))}></Route>
            <Route path='/login' element={<Login />}></Route>
            <Route path='/user' element={<User />}></Route>
          </Routes>
        </Suspense> */}


        {/* 导航菜单 */}
        <div className="tabbar">
          <NavLink to={'/'}>首页</NavLink>
          <NavLink to={'/login'}>登录</NavLink>
          <NavLink to={'/user'}>会员中心</NavLink>
        </div>
      </HashRouter>
    </>
  )
}

export default App
